<template>
  <div class="preview">
    <!-- 弹框内部结构 -->
    <div class="box">
      <div class="one-box">
        <div class="row1">
          <span
            >【题型】：<span v-if="dialogList.questionType === '1'">单选</span>
            <span v-else-if="dialogList.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </span>

          <span class="box_b">【编号】：{{ dialogList.number }}</span>
          <span
            >【难度】：<span v-if="dialogList.difficulty === '1'">简单</span>
            <span v-else-if="dialogList.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </span>
          <span>【标签】：css</span>
        </div>
        <div class="row2">
          <span>【学科】：{{ dialogList.subject }}</span>
          <span class="box_b" >【目录】：{{ dialogList.catalog }}</span>
          <span>【方向】：{{ dialogList.direction }}</span>
          <span></span>
        </div>
      </div>
      <div class="two-box">
        <div>【题干】：</div>
        <div v-html="dialogList.question" class="text">
          {{ dialogList.question }}
        </div>
        <div>
          <span v-if="dialogList.questionType === '1'">单选</span>
          <span v-else-if="dialogList.questionType === '2'">多选</span>
          <span v-else>简答</span> 选项：(以下选中的选项为正确答案)
        </div>
        <el-radio v-model="radio" label="1">1</el-radio>
        <el-radio v-model="radio" label="2">2</el-radio>
        <el-radio v-model="radio" label="3">3</el-radio>
        <el-radio v-model="radio" label="4">4</el-radio>
      </div>
      <div class="three-box">
        <div>
          <span>【参考答案】 ：</span>
          <el-button type="danger" size="mini" @click="videoClick"
            >视频答案预览</el-button
          >
        </div>

        <div v-if="videoShow">
          <video class="video" :src="dialogList.videoURL" controls></video>
        </div>

        <div class="answer-keys">
          <span>【答案解析】 ：<span v-html="dialogList.answer"></span></span>
        </div>
        <div>
          <span>【题目备注】 ：{{ dialogList.remarks }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'preview',
  components: {},
  props: {
    dialogList: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      radio: {},
      videoShow: false
    }
  },
  created () {},
  methods: {
    videoClick () {
      if (this.dialogList.videoURL) {
        // this.videoShow = true
        this.videoShow = !this.videoShow
      } else {
        this.$message('此题没有视频')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  color: #929191;
}
.one-box {
  display: flex;
  flex-direction: column;
}
.row1 {
  margin-bottom: 10px;
   display: flex;

    span{
      width: 200px;
      height: 30px;
    }
}
.row2 {
  display: flex;

     span{
      width: 200px;
      height: 30px;
    }

}
.box_b{
    width: 362px!important;
}

.two-box {
  margin: 20px 0 0 0;
  padding: 10px 0;
  border-top: 1px solid #c8c4c4;
  border-bottom: 1px solid #c8c4c4;
  div {
    margin: 10px 0;
  }
  .text {
    color: rgb(65, 170, 240);
  }
}

.el-radio {
  display: block !important;
  margin: 8px 0;
}
.three-box {
  div {
    padding: 10px 0;
  }
  .answer-keys {
    border-top: 1px solid #c8c4c4;
    border-bottom: 1px solid #c8c4c4;
    span {
      display: inline-block !important;
    }
  }
}
.video {
  width: 300px;
  height: 200px;
}
</style>
